<template>
	<view>
		<u-popup :show="show" :round="10" :closeable="true" mode="center" @close="close" :safeAreaInsetBottom="false">
			<view class="reduce bf p10 f18 f-y-bt" @tap.stop>
				<view class="f-x-bt wei f20">
					<view class="dfa f-c f-g-1">{{type=='balance'?'调整余额':'调整积分'}}</view>
				</view>
				<view class="overflowlnr p-5-0 f16 mt10">当前{{type=='balance'?'余额':'积分'}}：<text
						style="color: #FD8906;">{{type=='balance'? form.account && form.account.balance : form.account && form.account.integral || 0}}</text>
				</view>
				<view class="uScroll pb10">
					<view class="mt15 mb10 bs10 srin p5" style="border:1px solid #ffc107">
						<u-input v-model="bForm.value" type="digit" placeholder="请输入数值" border="none"
							disabledColor="#fff" inputAlign="right">
							<view slot="prefix" class="dfa tabs f14">
								<view :class="actReduce==index?'bffd c0 wei6 bs6':'c9'" class="tab_i"
									v-for="(item,index) in lists" :key="index" @click="tabChange(item,index)">
									{{item.name}}
								</view>
							</view>
							<view slot="suffix" class="">{{type=='balance'?'元':'分'}}</view>
						</u-input>
					</view>
					<!-- <view class="key">
						<keybored type="digit" :max="99999" v-model="bForm.value" confirmText="确定"
							@doneClear="clearAll()" @input="intMoney" />
					</view> -->
					<view class="mt20">
						<view class="m15 c9 f14">调整原因<text class="cf5 pl5 wei6 f15">*</text></view>
						<creason ref="creasonRef" :list="list" @getRemark="getRemark" />
					</view>
				</view>
				<view class="f-1 f-y-e">
					<u-button @click="close" :customStyle="{marginRight:'10px'}"><text class="c0">取消</text></u-button>
					<u-button color="#FDDA34" @click="confirm"><text class="c0">确认</text></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import creason from '@/components/other/creason.vue';
	import keybored from '@/components/liujto-keyboard/keybored.vue';
	import {
		mapState,
	} from 'vuex'
	export default {
		props: {
			form: {
				type: Object,
				default: {}
			},
		},
		components: {
			creason,
			keybored,
		},
		data(props) {
			return {
				show: false,
				r_dis: false,
				actReduce: 0,
				desc: '',
				discount: '',
				disMoney: '',
				afDis: '',
				afMoney: '',
				resons: [],
				list: [],

				lists: [{
						name: '增加',
						value: 1,
					},
					{
						name: '扣减',
						value: 2,
					}
				],
				bForm: {
					value: 0,
					type: 1,
					notes: "",
				},
				type: 'balance',
				// reasonConfig: [],
			}
		},
		computed: {
			...mapState({
				reasonConfig: state => state.config.reasonConfig,
			}),
		},
		methods: {
			open(t) {
				this.bForm.value = 0
				this.type = t
				this.list = t == 'balance' ? this.reasonConfig && this.reasonConfig.balance : this.reasonConfig && this
					.reasonConfig.integral || []
				this.show = true
			},
			close() {
				this.bForm.notes = ''
				this.show = false
				this.$refs['creasonRef'].close()
			},
			tabChange(v, i) {
				this.bForm.type = v.value
				this.actReduce = i
			},
			getRemark(e) {
				this.bForm.notes = e.join('，')
			},
			clearAll() {
				this.bForm.value = 0
			},
			intMoney(val) {
				this.bForm.value = val
			},
			confirm() {
				if (this.bForm.notes) {
					if (this.type == "balance") {
						this.$emit('handeditBe', this.bForm)
					} else {
						this.$emit('handeditIl', this.bForm)
					}
				} else {
					uni.$u.toast('请输入备注');
				}


			}
		}
	}
</script>

<style lang="scss" scoped>
	.reduce {
		width: 650rpx;
		overflow: hidden;
		border-radius: 20rpx;

		.uScroll {
			height: 580rpx;
			overflow: hidden;
			overflow-y: scroll;
		}

		.tabs {
			display: inline-flex;
			border-radius: 6px;
			background: #eeeeee;

			.tab_i {
				padding: 8px 15px;
			}
		}

		.bffd {
			background: #FDDA34;
		}

		.dis {
			padding: 8px 0;
			width: 23%;
			border: 1px solid #e6e6e6;
		}

		// .key {
		// 	/deep/.ljt-keyboard-body {
		// 		border-radius: 10px;
		// 		border: 1px solid #e5e5e5;

		// 		/deep/.ljt-keyboard-number-body {
		// 			width: 320px !important;
		// 			height: 200px !important;
		// 		}

		// 		.ljt-number-btn-confirm-2 {
		// 			background: #FDDA34 !important;
		// 		}
		// 	}
		// }

		.reson_i {
			position: relative;
			display: inline-block;
			border: 1px solid #e6e6e6;
			padding: 8px 15px;

			.r_gou {
				display: none;
				position: absolute;
				top: 0px;
				right: 0px;
				width: 0;
				height: 0;
				border-top: 10px solid #4275F4;
				border-right: 10px solid #4275F4;
				border-left: 10px solid transparent;
				border-bottom: 10px solid transparent;
			}

			.icon-duigou {
				display: none;
				position: absolute;
				top: -2px;
				right: -2px;
				transform: scale(0.6);
			}
		}

		.acreson_i {
			border: 1px solid #FD8906;
			background: #fff9dd;

			.r_gou,
			.icon-duigou {
				display: block;
			}
		}
	}
</style>